<!--
 * @Autor: Aka
 * @Date: 2023-06-28 13:42:58
 * @Description:
 * @LastEditTime: 2023-07-06 14:44:57
-->
<template>
	<div class="columnFlex">
		<!-- 编辑自选 -->
		<HeaderBar :currentName="_t18('quote_edit')" :cuttentRight="cuttentRight" @linkTo="linkTo" />
		<div class="currencyList">
			<van-checkbox-group v-model="checked" shape="square" @change="change" ref="checkboxGroup">
				<div class="itemEvery" v-for="(item, index) in currentCoinList" :key="index">
					<div class="item">
						<EditLeft :data="item"></EditLeft>
						<CurrentcyNumVue :data="item"></CurrentcyNumVue>
						<!-- <van-checkbox :name="`{id:${item.id},coin:${item.coin},icon:${item.logo}}`"> -->
						<van-checkbox :name="item.coin">
							<template #icon="props">
								<svg-load class="rightImg" :name="props.checked ? 'gou-x' : 'gou-w'" />
							</template>
						</van-checkbox>
					</div>
				</div>
			</van-checkbox-group>
		</div>
		<div class="placeholder"></div>
		<div class="editCon">
			<div class="left" @click="delList">
				<svg-load :name="showDel ? 'sanchu16x18-x' : 'sanchu16x18-w'" class="chooseImg"></svg-load>
				<!-- 删除 -->
				<div :style="{ color: showDel ? '#17ac74' : '#bcbcbc', marginLeft: '10px' }">{{ _t18('quote_del') }}
				</div>
			</div>
			<div class="right">
				<svg-load :name="allFlag ? 'gou-x' : 'gou-w'" class="chooseImg" @click="checkAll"></svg-load>
				<!-- <svg-load :name="allFlag?'gou-x':'gou-w'" class="chooseImg" @click="toggleAll"></svg-load> -->
				<!-- 全选 -->
				<div>{{ _t18('quote_all') }}</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		getCollect,
		setCollectAdds,
		removeCollectRemoves
	} from '@/api/trade'
	import HeaderBar from '@/components/HeaderBar/index.vue'
	import EditLeft from '@/components/CurrencyList/editLeft.vue'
	import CurrentcyNumVue from '../components/optional/currentcyNum.vue'

	const cuttentRight = {
		name: _t18('quote_add') //添加
	}
	// 删除按钮
	const showDel = ref(false)
	import {
		useTradeStore
	} from '@/store/trade'
	import {
		showToast
	} from 'vant'
	import {
		_t18
	} from '@/utils/public'
	import {
		useToast
	} from '@/hook/useToast'
	const {
		_toast
	} = useToast()
	import {
		useMainStore
	} from '@/store/index.js'
	const mainStroe = useMainStore()
	mainStroe.setTradeStatus(Number(-1))
	const tradeStore = useTradeStore()
	const searchValue = ref('') // 搜索
	const checked = ref([])
	const checkboxGroup = ref(null)
	const allFlag = ref(false)
	const toggleAll = () => {
		// allFlag.value=!allFlag.value
		checkboxGroup.value.toggleAll()
	}
	const checkAll = () => {
		allFlag.value = !allFlag.value
		checkboxGroup.value.toggleAll(allFlag.value)
	}

	const currentCoinList = ref([])
	// header 回调
	const linkTo = () => {
		setCollectAdds(addList.value).then((res) => {
			if (res.code == '200') {
				_toast('quote_addSuccess')
				getCollectList()
				tradeStore.getCoinList()
			} else {
				showToast(res.msg)
				getCollectList()
			}
		})
	}
	const delList = () => {
		if (showDel.value) {

			// const ids = idArr.value.toString()
			// console.log("ids", ids)
			removeCollectRemoves(ids.value).then((res) => {
				if (res.code == '200') {
					_toast('quote_addSuccess')
					getCollectList()
					tradeStore.getCoinList()
				} else {
					showToast(res.msg)
					getCollectList()
				}
			})
		}
	}
	const handelCollect = () => {
		console.log(444)
	}
	// 自选列表
	const collectList = ref()
	const ids = ref()
	const getCollectList = async () => {
		const res = await getCollect()
		if (res.code == 200) {
			collectList.value = res.data
			let temp = []

			currentCoinList.value?.forEach((item, index) => {
				collectList.value?.forEach((its, ids) => {
					if (item.coin === its.coin) {
						temp.push(item.coin)
					}
				})
			})
			checked.value = temp
		}
	}
	onMounted(() => {

		getCollectList()
		currentCoinList.value = tradeStore.secondContractCoinList
	})
	const idArr = ref([])
	const change = (e) => {

		showDel.value = e.length > 0 ? true : false
		let arr = Object.values(e)

		let resultAdd = []
		let resultDel = ''
		arr.forEach((item, index) => {
			currentCoinList.value?.forEach((itm, idx) => {
				if (item === itm.coin) {
					let obj = {}
					obj.coin = itm.coin
					obj.icon = itm.logo
					resultAdd.push(obj)
				}
			})
		})
		// console.log("addList", resultAdd)
		addList.value = resultAdd
		let str = ''
		let idArr = []
		arr.forEach((item, index) => {
			collectList.value?.forEach((itm, idx) => {
				if (item === itm.coin) {
					idArr.push(itm.id)
				}
			})
			console.log('changeStr', idArr.toString())
			ids.value = idArr.toString()

		})

	}
	const addList = ref([])
</script>
<style lang="scss" scoped>
	.currencyList {
		flex: 1;
		padding: 20px 15px 0;
		display: block;
		margin-top: 60px;

		.itemEvery {
			padding-bottom: 30px;

			.item {
				display: flex;
				align-items: center;

				.van-checkbox {
					padding: 2px 0;
				}

				.rightImg {
					margin-left: 10px;
					width: 18px;
					height: 18px;
				}
			}
		}
	}

	.search {
		margin: 20px 15px;
		height: 50px;
		background: var(--ex-default-background-color);
		border-radius: 25px;
		border: 1px solid var(--ex-border-color);
		display: flex;
		padding: 0 20px;
		align-items: center;
		justify-content: space-between;

		.searchImg {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}

		.contain {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: var(--ex-font-color6);

			.inputSearch {
				flex: 1;
			}

			input::-webkit-input-placeholder {
				color: var(--ex-font-color5);
			}

			input::-moz-input-placeholder {
				color: var(--ex-font-color5);
			}

			input::-ms-input-placeholder {
				color: var(--ex-font-color5);
			}

			.over {
				margin-left: 5px;
				color: var(--ex-font-color9);
			}
		}
	}

	.placeholder {
		height: 65px;
	}

	.editCon {
		position: fixed;
		width: 100%;
		background-color: var(--ex-default-background-color);
		bottom: 0;
		z-index: 9;
		border-top: 1px solid var(--ex-border-color);
		height: 64px;
		display: flex;
		padding: 0 15px;
		align-items: center;
		font-size: 14px;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			color: var(--ex-font-color9);

			.delectImg {
				width: 16px;
				height: 18px;
				margin-right: 10px;
			}
		}

		.right {
			display: flex;
			align-items: center;
			color: var(--ex-default-font-color);

			.chooseImg {
				width: 18px;
				height: 18px;
				margin-right: 12px;
			}
		}
	}
</style>